<template>
  <view
    class="goods-detail"
    v-if="goodsInfo"
  >

    <!-- 1 轮播图 -->
    <u-swiper
      :list="goodsInfo.pics"
      name="pics_big"
      height="497"
      img-mode="aspectFit"
      bg-color="#fff"
      @click="handlePreviewImage"
    ></u-swiper>
    <!-- 1 轮播图 -->

    <!-- 2 价格 -->
    <view class="goods-price">￥{{goodsInfo.goods_price}}</view>
    <!-- 3 名称 -->
    <view class="goods-name u-line-2">{{goodsInfo.goods_name}}
    </view>

    <!-- 4 图片详情 -->
    <view class="goods_introduce">
      <view class="goods_introduce-title">图文详情</view>
      <view class="goods_introduce-content">
        <!-- v-html -->
        <!-- <view v-html="goodsInfo.goods_introduce"></view> -->
        <!-- rich-text -->
        <!-- <rich-text :nodes="goodsInfo.goods_introduce"></rich-text> -->
        <u-parse :html="goodsInfo.goods_introduce"></u-parse>
      </view>
    </view>

    <!-- 5 提交订单栏 -->
    <view class="navigation">
      <view class="left">
        <view class="item">
          <u-icon
            name="server-fill"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">客服</view>
        </view>
      <navigator
          class="item car"
          url="/pages/cart/cart"
          open-type="switchTab"
        >
          <u-badge
            class="car-num"
            :count="cartCount"
            type="error"
            :offset="[-3, -6]"
          ></u-badge>
          <u-icon
            name="shopping-cart"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">购物车</view>
        </navigator>
      </view>
      <view class="right">
        <view
          class="cart btn u-line-1"
          @click="handleGoodsAdd"
        >加入购物车</view>
        <view class="buy btn u-line-1">立即购买</view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapMutations, mapGetters } from "vuex";

export default {
  data() {
    return {
      // 对象格式
      goodsInfo: null,
    };
  },
  computed: {
    // ...mapState("cart", ["cartList"]),

    // 计算 购物车中总的购买数据
    // count() {
    //   // return
    //   let count = 0;
    //   this.cartList.forEach((goods) => {
    //     count += goods.num;
    //   });
    //   return count;
    // },
    ...mapGetters("cart", ["cartCount"]),
  },
  onLoad({ goods_id }) {
    //如果 goods_id 没有的时候  默认值  设置 9832
    goods_id = goods_id || 9832;

    this.getGoodsDetail(goods_id);
  },

  methods: {
    ...mapMutations("cart", ["cartAdd"]),

    // 获取商品详情
    async getGoodsDetail(goods_id) {
      this.goodsInfo = await this.$u.http.get("/goods/detail", { goods_id });
    },
    // 点击轮播图 放大预览
    handlePreviewImage(index) {
      // index  当前点击的轮播图的索引
      // 要预览的轮播图中的图片地址 -  数组
      const urls = this.goodsInfo.pics.map((pic) => pic.pics_big);
      // 放大预览 调用小程序的api
      uni.previewImage({ urls, current: urls[index] });

      // 获取用户当前点击的图片地址
    },

    // 点击加入购物车
    handleGoodsAdd() {
      // 调用 修改 state中购物车的方法
      this.cartAdd({ value: this.goodsInfo });

      // 提示用户
      uni.showToast({
        title: "添加成功",
        // icon: "none",
      });
    },
  },
};
</script>

<style lang="scss">
.goods-detail {
  padding-bottom: 102rpx;
  .goods-price {
    padding: 10rpx;
    color: $theme-color;
  }
  .goods-name {
    padding: 0 10rpx;
  }
  .navigation {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    display: flex;
    margin-top: 100rpx;
    border: solid 2rpx #f2f2f2;
    background-color: #ffffff;
    padding: 16rpx 0;
    .left {
      display: flex;
      font-size: 20rpx;
      .item {
        margin: 0 30rpx;
        &.car {
          text-align: center;
          position: relative;
          .car-num {
            position: absolute;
            top: -10rpx;
            right: -10rpx;
          }
        }
      }
    }
    .right {
      display: flex;
      font-size: 28rpx;
      align-items: center;
      .btn {
        line-height: 66rpx;
        padding: 0 30rpx;
        border-radius: 36rpx;
        color: #ffffff;
      }
      .cart {
        background-color: #ed3f14;
        margin-right: 30rpx;
      }
      .buy {
        background-color: #ff7900;
      }
    }
  }
}
</style>